<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.tab+'('+item.total+')'" :name="item.name" v-for="item in tabs" :key='item.id'>
        <el-form :inline="true" label-width='90px'>
          <el-form-item label="姓名：">
            <el-input v-model="queryParam.full_name" placeholder="请输入姓名" clearable class="filter-item"></el-input>
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable class="filter-item"></el-input>
          </el-form-item>
          <el-form-item label="职位类型：">
            <el-cascader
            v-model="queryParam.attr_value_id"
            :options="postTypeList"
            :props='optionProps'
            :show-all-levels="false"
            @change='filterPostChange'
            ref='postCascader'
            placeholder="请选择职位类型"
            class="filter-item" 
            ></el-cascader>
          </el-form-item>
          <el-form-item label="准驾车型：">
            <el-select v-model="queryParam.driving_model" placeholder="请选择准驾车型" class="filter-item">
              <el-option
                v-for="item in drivingList"
                :key="item.value_id"
                :label="item.value_name"
                :value="item.value_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户来源：">
            <el-select v-model="queryParam.source" placeholder="请选择用户来源" class="filter-item">
              <el-option
                v-for="item in sourceList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期：" class="flex_box">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              class="filter-item"
              @change='timeChange'
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
            <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
            <el-button class="filter-item search" icon="iconfont icon-daochu" @click="handleExport">导出</el-button>
            <el-button class="filter-item search" icon="iconfont icon-piliangdaoru" @click="handleImport">批量导入</el-button>
            <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="showResumeDialog(1)">添加简历</el-button>
          </el-form-item>
        </el-form>
        <el-row class="count_box" :gutter="35">
          <el-col :span="12">
            <div class="count_item flex_box_center">
              <p class="icon icon2"></p>
              <div class="count_info">
                <p>{{total_count}}</p>
                <span>简历总数</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="count_item flex_box_center">
              <p class="icon icon1"></p>
              <div class="count_info">
                <p>{{filterPostName || post_count+'种'}}</p>
                <span>职位类型</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-table
          :data="data"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
          <el-table-column prop="user_info.mobile" label="账号" align='center' width='100'/>
          <el-table-column prop="user_info.full_name" label="姓名" width='70' align='center'/>
          <el-table-column prop="user_info.age" label="年龄" width='50' align='center'/>
          <el-table-column label="是否为保到岗" align='center' width='100'>
            <template slot-scope="item">
              <p>{{getIsGua(item.row.user_info)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="证照类型" align='center' width='70'>
            <template slot-scope="item">
              <p>{{item.row.user_info?getDrivingModel(item.row.user_info.driving_model):'--'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="期望职位" align='center'>
            <template slot-scope="item">
              <p>{{item.row.diy_post_type || getAttrValue(item.row.value_list,'POST_TYPE')}}</p>
            </template>
          </el-table-column>
          <el-table-column label="期望薪资" align='center'>
            <template slot-scope="item">
              <p>{{getSalary(item.row)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="工作地区" align='center'>
            <template slot-scope="item">
              <p>{{item.row.province_name}}{{item.row.city_name}}{{item.row.district_name}}</p>
            </template>
          </el-table-column>
          <el-table-column label="来源" width='70' align='center'>
            <template slot-scope="item">
              <p>{{getSourceText(item.row.source)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align='center' width='130'>
            <template slot-scope="item">
              <p>{{item.row.update_time || item.row.create_time}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="last_browse_date" label="最后访问时间" width='130' v-if="queryParam.status==1" align='center'/>
          <el-table-column label="推广" width='120' align='center'>
            <template slot-scope="item">
              <el-switch
                v-model="item.row.is_top"
                :active-value="1"
                :inactive-value="0"
                active-text='置顶'
                @change="resumeUpdate(item.row,'is_top')"/>
              <el-switch
                v-model="item.row.is_hot"
                :active-value="1"
                :inactive-value="0"
                active-text='热门'
                @change="resumeUpdate(item.row,'is_hot')"/>
            </template>
          </el-table-column>
          <el-table-column label="简历状态" align='center' width='120'>
            <template slot-scope="item">
              <el-switch
                v-model="item.row.is_show"
                :active-value="1"
                :inactive-value="0"
                :active-text="item.row.is_show==1?'求职中':'已下架'"
                @change="resumeUpdate(item.row,'is_show')"
              />
            </template>
          </el-table-column>
          <el-table-column prop="status" label="审核状态" width='80' align='center'>
            <template slot-scope="item">
              <el-button type="text">{{getStatusText(item.row.status)}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width='320' align='center'>
            <template slot-scope="item">
              <el-link type="primary" class="table_btn" v-if="item.row.status==0" @click="handleDetails(item.row,'2')" :underline="false"><i class="iconfont icon-shenhe1"></i>审核</el-link>
              <el-link type="primary" class="table_btn" @click="handleDetails(item.row,'1')" :underline="false"><i class="iconfont icon-chakan"></i>查看</el-link>
              <el-link type="primary" class="table_btn" @click="showResumeDialog(1,item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
              <el-link type="primary" class="table_btn" @click="showResumeDialog(2,item.row)" :underline="false"><i class="el-icon el-icon-plus"></i>添加简历</el-link>
              <el-link type="danger" class="table_btn" @click="handleDelete(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
              <el-link type="primary" class="table_btn"  v-if="queryParam.status==1" @click="browseList(item.row.id)" :underline="false"><i class="iconfont icon-liulan"></i>被访问</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="pagination-container"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paginate.current"
          :hide-on-single-page='isHideSingle'
          :page-sizes="paginate.sizes"
          :page-size="paginate.limit"
          :layout="paginate.layout"
          :total="paginate.total"/>
      </el-tab-pane>
    </el-tabs>
    <resumeReview ref='resumeReview' @resumeUpdate='resumeUpdate'></resumeReview>
    <addresume ref='addresume' @success='getList' :postTypeLists='postTypeList'></addresume>
    <importExcel ref='importExcel'></importExcel>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/excel'
import formOperate from '@/layout/mixin/formOperate'
import resumeReview from '@/views/talents/components/resumeReview'
import addresume from '../components/addResume'
import importExcel from '@/components/importExcel'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/profession/admin/resume',
      activeName: 'first',// tabs默认第几个展开
      tabs:[
        {id:-1,tab:'所有简历',name:'first',total:0},
        {id:0,tab:'待审核',name:'second',total:0},
        {id:1,tab:'已通过',name:'third',total:0},
        {id:2,tab:'已驳回',name:'fourth',total:0}
      ],
      queryParam: {
        full_name: '',
        attr_value_id: '',
        mobile:'',
        start_time:'',
        end_time:'',
        driving_model:'',
        source:'',
        page:1,
        page_size:10,
        status:-1,
        is_task:''
      },
      defaultQueryParam:['page','page_size','status'],
      post_count:'', // 职位类型
      total_count:'',//简历总数
      filterPostName:'',
      optionProps: {
        value: 'value_id',
        label: 'value_name',
        children: 'child'
      },
      time:''
    }
  },
  mounted() {
    this.GetAttrData('POST_TYPE')
  },
  methods: {
    // 搜索职位类型改变
    filterPostChange(e) {
      this.queryParam.attr_value_id = e[1]
      let nodes = this.$refs.postCascader.getCheckedNodes()
      this.filterPostName = nodes[0].label
    },
    // 查看详情/简历审核
    handleDetails(item,type) {
      this.$refs.resumeReview.show(item,type)
    },
    // 添加，修改简历
    showResumeDialog(type,item) {
      this.$refs.addresume.show(type,item)
    },
    // 修改简历置顶，热门，是否显示，审核
    resumeUpdate(item,key) {
      let param = {request_type:2}
      param[key] = item[key]
      if (key == 'status') {
        param['remake'] = item.remake
      }
      this.$http.put('/profession/admin/resume/'+item.id,param).then(response => {
        if (response.code === 10000) {
          this.$message.success(response.message)
          if (key == 'status') {
            this.$refs.resumeReview.hideDetail()
          }
          this.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 是否是保到岗
    getIsGua(info) {
      if (!info) return '--'
      return info.is_protect==1?'是':'否'
    },
    // // 修改简历
    // handleUpdate(item) {
    //   this.$refs.addresume.show(1,item.id)
    // },
    // 被访问列表
    browseList(id) {
      this.$router.push('/talents/resumeBrowse/'+id)
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'账号',key:'mobile'},
        {title:'姓名',key:'name'},
        {title:'年龄',key:'age'},
        {title:'准驾车型',key:'driving_model'},
        {title:'期望职位',key:'post'},
        {title:'期望薪资',key:'salary'},
        {title:'工作地区',key:'addr'},
        {title:'来源',key:'source'},
        {title:'更新时间',key:'update_time'},
        {title:'简历状态',key:'resume_status'},
        {title:'审核状态',key:'status'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          mobile:res.user_info.mobile,
          name:res.user_info.full_name,
          age:res.user_info.age,
          driving_model:res.user_info?this.getDrivingModel(res.user_info.driving_model):'--',
          post:res.diy_post_type || this.getAttrValue(res.value_list,'POST_TYPE'),
          salary:this.getSalary(res),
          addr:res.province_name+res.city_name+res.district_name,
          source:this.getSourceText(res.source),
          update_time:res.update_time || res.create_time,
          resume_status:res.is_show==1?'求职中':'已下架',
          status:this.getStatusText(res.status)
        })
      })
      console.log(list)
      export2Excel(columns,list,'简历数据')
    },
    // 批量导入
    handleImport() {
      this.$refs.importExcel.show(2)
    }
  },
  components:{
    addresume,
    resumeReview,
    importExcel
  }
}
</script>

<style lang="scss" scoped>
  .form-search-input{
    width: 150px;
  }
  .count_box{
    margin-bottom: 20px;
    font-size: 14px;
    color:#222;
    .count_item{
      height: 158px;
      padding:35px 0;
      box-shadow: 0px 0px 6px rgba(22, 78, 138, 0.19);
      box-sizing: border-box;
      cursor: pointer;
      &:hover{
        background: linear-gradient(318deg, #2193FE 0%, #65B5FF 100%);
        p{
          color:#fff;
        }
        span{
          color:#DCDCDC;
        }
        .icon{
          background-color:#fff;
        }
      }
      .icon{
        width: 88px;
        height: 88px;
        background-color: #E8F3FF;
        background-size:inherit;
        background-repeat:no-repeat;
        background-position: center center;
        border-radius: 50%;
        margin-right: 60px;
        &.icon1{
          background-image: url('~@/assets/images/icon15.png');
        }
        &.icon2{
          background-image: url('~@/assets/images/icon16.png');
        }
      }
      p{
        font-size: 46px;
        color:#424554;
        line-height: 46px;
        margin-bottom:4px;
      }
      span{
        font-size: 18px;
        color:#AAAAAA;
        line-height: 31px;
      }
    }
  }
  .dialog-footer{
    text-align: right;
  }
</style>